<template>
  <div class="user_evaluate">
    <div class="user">
      <span>用户评价</span><span>({{ totality }}+)</span>
    </div>
    <div class="evaluate">
      <div class="b">
        <span>{{ goodReputation }}%</span>
        <span>
          好评率
          <div class="bottom">
            <el-tooltip
              class="item"
              effect="dark"
              :content="content"
              placement="bottom-end"
            >
              <el-button>
                <i class="fa fad fa-question-circle"></i>
              </el-button>
            </el-tooltip>
          </div>
        </span>
      </div>
      <div class="b1">
        <div class="a">
          <span>好评</span>
          <el-progress
            :percentage="goodReputation"
            color="#ff5500"
            define-back-color="#ffffff"
          ></el-progress>
        </div>
        <div class="a">
          <span>中评</span>
          <el-progress
            :percentage="mediumReview"
            color="#ff8d00"
            define-back-color="#ffffff"
          ></el-progress>
        </div>
        <div class="a">
          <span>差评</span>
          <el-progress
            :percentage="negativeComment"
            color="red"
            define-back-color="#ffffff"
          ></el-progress>
        </div>
      </div>
    </div>
    <div class="c">
      <span>累计评价&nbsp;|</span>
      <span>视频/图片(99)</span>
      <span>追评(6)</span>
      <span>好评(800+)</span>
      <span>差评(0)</span>
      <span>
        <el-dropdown @command="handleCommand" >
          <span class="el-dropdown-link">
            商品款式<i class="el-icon-arrow-down el-icon--right"></i>
          </span>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item
              :command="index"
              v-for="(item, index) in productStyles"
              :key="index"
              :class="{ 'is-active': dropdownIndex === index }"
              >{{ item.name }}</el-dropdown-item
            >
          </el-dropdown-menu>
        </el-dropdown>
      </span>
    </div>
    <div class="d">
      <div><span>综合</span><span>&nbsp;|&nbsp;</span><span>最新</span></div>
      <div><span v-for="index in 4" :key="index">很可爱</span></div>
    </div>
    <div class="demo-type">
      <div v-for="item in productStyles" :key="item.id" class="type">
        <div>
          <el-avatar :src="require('@/assets/images/iyrkgi89.png')"></el-avatar>
          <span>1**民</span>
          <span>2023.11.21 19:17</span>
        </div>
        <div>可爱泥~就是衣服实在太难穿了，穿过一次就不想再脱的程度</div>
        <div>浏览81次</div>
      </div>
    </div>
    <div class="paging">
      <el-button-group>
        <el-button
          type="primary"
          icon="el-icon-arrow-left"
          round
          :disabled="pageIndex <= 1"
          @click="pageIndex = pageIndex - 1"
          >上一页</el-button
        >
        <el-button type="primary" round @click="pageIndex = pageIndex + 1"
          >下一页<i class="el-icon-arrow-right el-icon--right"></i
        ></el-button>
      </el-button-group>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      goodReputation: 90,
      mediumReview: 0,
      negativeComment: 10,
      totality: 10,
      content:
        '手办商品的好评率及分布是由用户真实购买后的历史评价数据计算得到。',
      productStyles: [
        {
          id: 1,
          name: '可爱',
        },
        {
          id: 2,
          name: '帅气',
        },
        {
          id: 3,
          name: '好看',
        },
        {
          id: 4,
          name: '超大',
        },
        {
          id: 5,
          name: '标准',
        },
      ],
      dropdownIndex: 0,
      total: 50,
      pageIndex: 1,
    }
  },
  methods: {
    handleCommand(command) {
      this.dropdownIndex = command
    },
  },
}
</script>

<style scoped lang="less">
.user_evaluate {
  width: 1170px;
  background-color: white;
  margin-left: 20px;
  border-radius: 20px;
  margin-top: 45px;
  padding-bottom: 30px;
}
.user {
  margin-left: 40px;
  height: 40px;
  line-height: 40px;
}
.user span:nth-child(2) {
  color: #000;
  font-weight: bold;
}
.evaluate {
  width: 1030px;
  background-color: #f2f2f2;
  height: 120px;
  margin-left: 40px;
}
.evaluate .b {
  width: 120px;
  padding-left: 70px;
  height: 200px;
  float: left;
}
.evaluate .b span:nth-child(1) {
  font-size: 50px;
  text-align: center;
  display: block;
  margin-left: -20px;
  width: 120px;
}
.evaluate .b span:nth-child(2) {
  width: 120px;
}
.bottom {
  position: relative;
  left: 40px;
  top: -24px;
}
.fa {
  color: #8e8e8e;
}
.b1 {
  width: 930px;
  margin-left: 200px;
}
.b1 .a {
  margin-top: 10px;
  padding-top: 10px;
  width: 730px;
}
/deep/ .b1 .a .el-progress {
  width: 630px;
  margin-left: 35px;
  margin-top: -20px;
}
.c {
  position: relative;
  left: -150px;
}
.c span {
  margin-left: 20px;
  padding: 0px 10px;
}
.c span:hover {
  background-color: #f5f5f5;
  border-radius: 20px;
}
.el-dropdown-link {
  cursor: pointer;
  color: #8e8e8e;
}

.el-icon-arrow-down {
  font-size: 12px;
}
.el-dropdown-menu__item:hover {
  background-color: #ff8200;
  color: #ffffff;
}
.el-dropdown-menu__item.is-active {
  background-color: #ff8200;
  color: #ffffff;
}
.d {
  position: relative;
  left: -120px;
}
.d div:nth-child(1) {
  float: left;
}
.d div:nth-child(1) span:nth-child(2),
.d div:nth-child(1) span:nth-child(3) {
  color: #b9b9b9;
}
.d div:nth-child(1) span:nth-child(3):hover {
  color: #737373;
}
.d div:nth-child(2) span {
  color: #7d7d7d;
  margin-left: 20px;
  padding: 0px 10px;
  background-color: #f5f5f5;
  border-radius: 20px;
}
.d div:nth-child(2) span:hover {
  background-color: #e0e0e0;
}
.demo-type {
  margin-top: 10px;
  margin-left: 40px;
}
.demo-type .type {
  border-bottom: 1px solid #eeeeee;
  width: 1030px;
  padding-bottom: 20px;
}
.demo-type div:nth-child(1) div:nth-child(1) {
  position: relative;
  left: -120px;
}
.demo-type div div:nth-child(1) span:nth-child(1) {
  width: 42px;
  height: 42px;
}
.demo-type div div:nth-child(1) span:nth-child(2) {
  position: relative;
  top: -25px;
  left: 10px;
}
.demo-type div div:nth-child(1) span:nth-child(3) {
  position: relative;
  top: -5px;
  left: -25px;
}
.demo-type div div:last-child {
  position: relative;
  top: 15px;
  color: #ababab;
}
.paging {
  text-align: center;
  margin-top: 10px;
}
.paging .el-button {
  margin-right: 20px;
}
</style>
